<%@ page import="org.example.entity.UserSystem" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/13
  Time: 10:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Dashboard V.1 | Kiaalap - Kiaalap Admin Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Lobibox CSS
        ============================================ -->
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">

    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/font-awesome.min.css">


    <link rel="stylesheet" href="css/mloading.css">

    <!-- DatetimePicker CSS
        ============================================ -->
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">

    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- meanmenu icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="css/main.css">
    <!-- educate icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/educate-custon-icon.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="css/calendar/fullcalendar.print.min.css">

    <!-- form CSS
		============================================ -->
    <link rel="stylesheet" href="css/form/all-type-forms.css">

    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="css/style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- modernizr JS
		============================================ -->
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="js/mloading.js"></script>

    <script src="js/echarts.min.js"></script>
    <script src="js/moment.js"></script>
</head>

<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Start Left menu area -->
<div class="left-sidebar-pro">
    <nav id="sidebar" class="">
        <div class="sidebar-header">
            <a href="${pageContext.servletContext.contextPath}/admin/dataReport.jsp"><img class="main-logo" src="img/logo/logo.png" alt="" /></a>
            <strong><a href="${pageContext.servletContext.contextPath}/admin/dataReport.jsp"><img src="img/logo/logosn.png" alt="" /></a></strong>
        </div>
        <div class="left-custom-menu-adp-wrap comment-scrollbar">
            <nav class="sidebar-nav left-sidebar-menu-pro">
                <ul class="metismenu" id="menu1">
                    <li>
                        <a title="Landing Page" href="${pageContext.servletContext.contextPath}/admin/dataReport.jsp" aria-expanded="false"><span class="fa fa-user-circle-o" aria-hidden="true"></span> <span class="mini-click-non">数据报表</span></a>
                    </li>
                    <li  class="active">
                        <a class="has-arrow" href="index.html">
                            <span class="fa fa-id-card"></span>
                            <span class="mini-click-non">用户信息</span>
                        </a>
                        <ul class="submenu-angle" aria-expanded="true">
                            <li><a href="${pageContext.servletContext.contextPath}/admin/userList.jsp"><span class="mini-sub-pro">用户列表</span></a></li>
                            <li><a href="${pageContext.servletContext.contextPath}/admin/goodsManager.jsp"><span class="mini-sub-pro">商品列表</span></a></li>
                            <li><a href="${pageContext.servletContext.contextPath}/admin/ordex00001.jsp"><span class="mini-sub-pro">订单管理</span></a></li>
                            <li><a href="${pageContext.servletContext.contextPath}/admin/commodity.jsp"><span class="mini-sub-pro">商品管理</span></a></li>

                        </ul>
                    </li>
                    <li>
                        <a title="Landing Page" href="${pageContext.servletContext.contextPath}/admin/userSystem.jsp" aria-expanded="false"><span class="fa fa-user-circle-o" aria-hidden="true"></span> <span class="mini-click-non">用户系统</span></a>
                    </li>
                    <li>
                        <a class="has-arrow" href="all-professors.html" aria-expanded="false"><span class="fa fa-cogs"></span> <span class="mini-click-non">系统管理</span></a>
                        <ul class="submenu-angle" aria-expanded="false">
                            <li><a href="all-professors.html"><span class="mini-sub-pro">菜单管理</span></a></li>
                            <li><a  href="add-professor.html"><span class="mini-sub-pro">角色管理</span></a></li>
                            <li><a href="edit-professor.html"><span class="mini-sub-pro">字典管理</span></a></li>
                            <li><a href="professor-profile.html"><span class="mini-sub-pro">权限管理</span></a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </nav>
</div>
<!-- End Left menu area -->
<!-- Start Welcome area -->
<div class="all-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="logo-pro">
                    <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt="" /></a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-advance-area">
        <div class="header-top-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="header-top-wraper">
                            <div class="row">
                                <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
                                    <div class="menu-switcher-pro">
                                        <button type="button" id="sidebarCollapse" class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                            <i class="fa fa-bars"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-7 col-sm-6 col-xs-12">
                                    <div class="header-top-menu tabl-d-n">

                                    </div>
                                </div>
                                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                                    <div class="header-right-info" style="padding-right: 50px">
                                        <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                            <li class="nav-item">
                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                                        onclick="showUnreadMsgList(5)"  >
                                        <span class="glyphicon glyphicon-bell">
                        <span id="notifyNum" class="badge ">0</span>
                    </span>
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu" id="msgList" style="min-width: 250%">
                                                    <li>
                                                        <div style="width: 100%;height:100px;">
                        <span class="glyphicon glyphicon-search" aria-hidden="true" style="margin-right: 10px;">
                        </span>
                                                            <div style="display: inline-block;vertical-align: middle;margin-left:10px;"><h5>暂无新消息</h5><h6>content</h6></div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="nav-item">

                                                <a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle">
                                                    <img src="img/product/pro4.jpg" alt="" />
                                                    <span class="admin-name">&nbsp欢&nbsp迎&nbsp您&nbsp</span>
                                                    <i class="fa fa-angle-down edu-icon edu-down-arrow"></i>
                                                </a>
                                                <ul role="menu" class="dropdown-header-top author-log dropdown-menu animated zoomIn">
                                                    <li><a href="#"><span class="edu-icon edu-home-admin author-log-ic"></span>My Account</a>
                                                    </li>
                                                    <li><a href="#"><span class="edu-icon edu-user-rounded author-log-ic"></span>My Profile</a>
                                                    </li>
                                                    <li><a href="#"><span class="edu-icon edu-money author-log-ic"></span>User Billing</a>
                                                    </li>
                                                    <li><a href="historyMsg.jsp"><span class="edu-icon edu-settings author-log-ic"></span>查看历史</a>
                                                    </li>
                                                    <li><a href="${pageContext.servletContext.contextPath}/system/logOut"><span class="edu-icon edu-locked author-log-ic"></span>Log Out</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid" style="padding: 20px 15px 0 15px;">

<div class="modal" id="showSystemMsgModal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" onclick="closeSystemMsgModal()">
                    <span>&times;</span>
                </button>
                <div class="modal-title" id="notifyTitle">系统标题</div>
            </div>
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-4by3">
                    <iframe id="notifyContent"  class="embed-responsive-item"></iframe>
                </div>
            </div>
            <div class="modal-footer">
                <div>
                    <button type="button" id="closeMsg" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <form action="historyMsg.jsp">
                        <button type="button" class="btn btn-info" >
                            <a href="historyMsg.jsp">查看历史</a>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    // 新建一个eventSource对象, 如果和服务器端断开连接，会自动尝试重新连接
    var eventSource = new EventSource("http://localhost:8080/se/conn/123");
    $(function () {
        console.log("eventSource:"+eventSource);
    })
    if (null != eventSource){
        // 当服务器端有消息的时候，该方法会被触发, 接收到后端通过  SseEmitter.send(obj);
        eventSource.onmessage = function(msg) {
            console.log(msg.data)
        }

        eventSource.addEventListener("notify_data", function(msg) {
            console.log('notify_data', msg.data);
            //计算发送消息的总数，然后显示在对应位置
            var num = Number($('#notifyNum').html());
            $('#notifyNum').html(++num);
        })

        eventSource.addEventListener('department_notify', function (msg) {
            console.log('department_notify', msg.data)
        })
    }


    //关闭系统消息模态框
    function closeSystemMsgModal() {

        $('#showSystemMsgModal').modal('hide');

    }
    //打开系统消息模态框,查看具体消息
    function showMsgModal(id) {
        $('#showSystemMsgModal').modal('show');
        /*   $.ajax({
               url:'http://localhost:8080/notify/systemMsg/'+id,
           })*/
        $.get('http://localhost:8080/notify/systemMsg/'+id,
            {},function (_data){
                //如果拥有code 说明出现错误
                if (_data.code){
                    showErrorBox("获取消息列表错误")
                }else{
                    console.log('notify:'+_data.npath);
                    $('#notifyTitle').html("标题："+_data.ntitle);
                    /* 加http:// 切记！*/
                    $('#notifyContent').attr("src","http://localhost/"+_data.npath);
                    //点击后直接插入数据
                    insertMVR(_data);
                }

            }
        );

    }


    //下拉框获取未读消息列表
    function showUnreadMsgList(userId) {
        $.get('http://localhost:8080/notify/getUnreadMsgList/'+userId,{},function (_data) {
            if (_data.code){
                showErrorBox('获取未读消息列表失败，请稍后再试')
            }else{
                $('#msgList').html("");
                console.log(_data);
                //有数据
                if (_data.length>0){
                    for (var i = 0; i <_data.length;i++){
                        $('#msgList').append(
                            "<li>\n" +
                            "                <div style=\"width: 100%;height:100%;\">\n" +
                            "                        <span class=\"glyphicon glyphicon-tags\" aria-hidden=\"true\" style=\"margin-right: 10px;\">\n" +
                            "                        </span>\n" +
                            "                    <div style=\"display: inline-block;vertical-align: middle;margin-left:10px;\"><h5><a onclick='showMsgModal("+_data[i].id+")'>"+_data[i].ntitle+"</a></h5>" +
                            "<h6></h6></div>\n" +
                            "                </div>\n" +
                            "            </li>"
                        )
                    }
                }else {
                    //没数据
                    $('#msgList').html("<div style='display: inline-block;vertical-align: middle;margin-left:10px;'><h5>暂无新消息</h5></div>");
                }
            }
        })
    }

    /**
     *  插入已读消息的uid和nid。
     */
    function insertMVR(msgData) {
        $.ajax({
            url:'http://localhost:8080/notifyView/insert',
            dataType:'json',
            type:'POST',
            data:{
                /* userId 由后端获取*/
                userId:5,
                notifyId:msgData.id,
                status:1

            },
            success:function (_data) {
                if (_data.code>0){

                }
            }
        })
    }
</script>
        </body>